<template>
    <div>
        <a-modal title="操作历史" :bodyStyle="{ height: '600px', overflow: 'auto' }" centered v-model:visible="visible" :width="800" :footer="null" @cancel="handleCancel">
            <a-table rowKey="taskId" size="small" :columns="tableColumns" :data-source="list" :pagination="false">
                <template #result="{ record }">
                    {{ record.variables.result }}
                </template>
                <template #taskDesc="{ record }">
                    <div style="white-space: pre-wrap" v-html="record.taskDesc" />
                </template>
                <template #action="{ record }">
                    <a v-if="checkIsShow(record)" @click="showDetail(record)">详情</a>
                </template>
            </a-table>
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    setup() {
        const state = reactive<any>({
            tableColumns: [
                {
                    title: '操作时间',
                    dataIndex: 'createTime',
                    width: 200,
                    ellipsis: true
                },
                {
                    title: '操作人',
                    dataIndex: 'createByName',
                    width: 150
                },
                {
                    title: '操作类型',
                    dataIndex: 'operation',
                    width: 150
                },
                {
                    title: '操作内容',
                    dataIndex: 'content'
                }
            ],
            list: [],
            visible: false
        });
        const getList = async (catalogCode) => {
            const query = {
                catalogCode
            };
            const { success, moule } = await api.texingTreeModel.getOperationHistory(query);
            if (success) {
                state.list = [...moule];
            }
        };
        const open = (catalogCode) => {
            state.visible = true;
            getList(catalogCode);
        };
        const handleCancel = () => {
            state.visible = false;
        };
        return {
            ...toRefs(state),
            open,
            handleCancel
        };
    }
});
</script>

<style scoped>
</style>